import { InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import utils from '../../utils/index'
const List = () => {
    const navigate=useNavigate()
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)
    const {state}=useLocation()
    const {start,end}=state
    console.log(start,end);

    const getData=async()=>{
     const resp=await utils.post("/trip/train",{start,end,page})
     console.log(resp.data.data);
     setList([...list,...resp.data.data])
     setPage(page + 1)
     
    }
    useEffect(()=>{
    getData()
    },[])

    const getDeail=(v)=>{
      navigate("/deail",{state:v})
    }
  return (
    <div>
      列表
      <NavBar onBack={() => navigate(-1)}>{state.start}——{state.end}</NavBar>

      <div>
       {
        list.map((v,i)=>{
            return <dl key={i} style={{
                display: 'flex',
                justifyContent: 'space-around',
                padding: '10px'
            }}
             onClick={() => getDeail(v)}
            >
              <dt>{v.start}-{v.end}</dt>
              <dd>
               <div>是否高铁:{v.isSeat ? '非高铁' : '高铁'}</div>
               <div>是否有票:{v.isSpeed ? '无票' : '有票'}</div>
              </dd>
              <dd>
               <div>商务座:{v.tick.vip}</div>
               <div>一等座:{v.tick.firstTick}</div>
               <div>二等座:{v.tick.secondTick}</div>
              </dd>
            </dl>
        })
       }
      </div>
       <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default List
